<template>
	<view class="home">

		<view class="popup">
			<view class="tits">
				找回密码
			</view>
			<view class="label">
				<view class="tit">
					邮箱
				</view>
				<view class="input">
					<input v-model="email" placeholder="请输入邮箱">
				</view>
			</view>
			<view class="label">
				<view class="tit">
					验证码
				</view>
				<view class="input">
					<input v-model="code" placeholder="请输入验证码">
				</view>
				<view class="code">
					<view class="btn" v-show="show" @click="getCode">获取验证码</view>
					<view class="wait" v-show="!show">{{count}}</view>
				</view>
			</view>
			<view class="label">
				<view class="tit">
					密码
				</view>
				<view class="input">
					<input v-model="password1" password="true" placeholder="请输入新密码">
				</view>
			</view>

			<view class="label">
				<view class="tit">
					确认密码
				</view>
				<view class="input">
					<input v-model="password2" password="true" placeholder="请输入确认密码">
				</view>
			</view>

			<view class="button" @click="GetForget()">
				找回密码
			</view>
			<view class="h">

			</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/request/index.js"
	import regeneratorRuntime from '@/lib/runtime/runtime'
	import {
		login
	} from "@/utils/asyncWx.js"
	export default {
		data() {
			return {
				code: "",
				show: true,
				count: "",
				email: "",
				password1: "",
				password2: "",
				nickname: ""
			}
		},
		onLoad() {

		},

		methods: {
			async GetForget() {
				if (this.password1 == '' || this.password2 == '' || this.code == '' || this.email == "") {
					uni.showToast({
						title: "输入框不能有空",
						icon: "none"
					})
					return
				}
				if (this.password1 != this.password2) {
					uni.showToast({
						title: "两次密码不一致",
						icon: "none"
					})
					return
				}
				let data = {
					code: this.code,
					username: this.email,
					password: this.password1,
				}
				var res = await request({
					url: "forget",
					method: "post",
					data
				})
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
			// 验证码
			async getCode() {
				if (this.email == '') {
					uni.showToast({
						title: res.msg,
					})
					return
				}

				let url = 'sendSms?name=1' + '&email=' + this.email;

				var res = await request({
					url: url,
				})

				uni.showToast({
					title: res.msg,
				})

				const TIME_COUNT = 60
				if (!this.timer) {
					this.count = TIME_COUNT
					this.show = false
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--
						} else {
							this.show = true
							clearInterval(this.timer)
							this.timer = null
						}
					}, 1000)
				}
			},
		}
	}
</script>

<style>
	.init {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 60rpx;
	}

	.init image {
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto;
	}

	.init .bb {
		margin: 60rpx auto;
		padding: 0 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 15rpx;
		text-align: center;
		background-color: #0DC06E;
		margin-bottom: 0;
		font-size: 28rpx;
		color: #ffffff;
	}

	button::after {
		border: none;
		background-color: none;
	}

	button {

		margin-left: auto;
		margin-right: auto;
		padding-left: 0rpx;
		padding-right: 0rpx;
		box-sizing: border-box;

		text-align: left;
		text-decoration: none;
		font-size: 28rpx;
		line-height: 1.35;

		color: #000000;
		background-color: #fff;

	}

	.popup {
		width: 100%;
		height: 500rrpx;

		/* padding: 5%; */
		padding-top: 30rpx;
		background-color: #fff;


	}

	.h {
		width: 100%;
		height: 20rpx;
		margin-top: 35px;
		background-color: #F3F3F3;
	}

	.popup .tt {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
	}

	.tits {
		margin-top: 20rpx;
		margin-left: 20rpx;
		font-weight: 700;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.popup .label {
		width: 100%;
		display: flex;
		height: 100rpx;
		align-items: center;
		position: relative;
		border-bottom: 2rpx solid #eee;
	}

	.popup .label .code {
		position: absolute;
		right: 20rpx;
		z-index: 4;
	}

	.popup .label button {
		width: 100% !important;
		height: 80rpx !important;

	}

	.popup .label button .css {

		display: flex !important;
		align-items: center !important;
		position: relative;
	}

	.popup .label .tit {
		width: 20% !important;
		font-size: 28rpx;
		margin-right: 10rpx;
		text-align: center;
	}

	.popup .label .img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.input {
		width: 100%;
		height: 80rpx;
	}

	.popup .label .img image {
		width: 80rpx;
		height: 80rpx;
	}

	.popup .label input {
		width: 100%;
		height: 100%;
		background-color: #fff;

	}

	.popup .zuo {
		width: 14rpx;
		height: 25rpx;
		position: absolute;
		right: 0;
	}

	.popup .button {
		margin: 60rpx auto;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 15rpx;
		text-align: center;
		background-color: #0DC06E;
		margin-bottom: 0;
		color: #ffffff;
	}
</style>